<template>
    <div class="page">
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">物业</span>
                </div>
            </van-nav-bar>

            <!--个人信息-->
            <div class="personal-info">
                <div class="myHeadImg" @click="clickHead()" ref="headImg">
                    <img src="../assets/images/head-portrait.png" alt="头像"/>
                </div>

                <div class="info">
                    <div>
                        <span class="name">{{$Cookies.get('personName')}}</span>
                        <i class="safety-icon"></i>
                    </div>

                    <div class="village-duty">
                        <span>{{$Cookies.get('communityName')&&$Cookies.get('communityName')!='null' ? $Cookies.get('communityName') : '暂无小区'}}</span> -
                        <span>安保管理员</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="module-box scan" @click="clickScan()">
            <img class="scan-img" src="../assets/images/systp.png" alt="扫一扫"/>
        </div>

        <div class="module-box tips">
            <p class="title">出入小区流程温馨提示：</p>
            <p>1.对出入人员要求关注公众号填写相关信息</p>
            <p>2.信息填写完成后，展示二维码</p>
            <p>3.对二维码进行扫描登记</p>
            <p>4.如果未关注此公众号，请扫描下方二维码</p>
        </div>

        <div class="module-box popularize">
            <img class="QR-code" src="../assets/images/ewm.jpg" alt="微信公众号"/>

            <div class="text">
                <p class="title">防御疫情，从我做起</p>
                <p>扫一扫，关注微信公众号</p>
                <p>注册填写个人信息</p>
            </div>
        </div>

    </div>
</template>

<script>
    import {NavBar,Dialog} from 'vant';
    import wx from 'weixin-js-sdk'
    export default {
        name: 'securityManage',
        components: {
            [NavBar.name]: NavBar,
            [Dialog.name]: Dialog,
        },
        props: {},
        data() {
            return {
                wxData:{},
            }
        },

        computed: {
            transitionName () {
              return this.$store.getters['test/personData']
            }
        },
        mounted() {
			this.getHeadImg();
        },
        methods: {
			//点击返回
			onClickLeft(){
				this.$router.go(-1);
			},

			//获取头像
			getHeadImg(){
				if(this.$Cookies.get('headImgUrl')){
					this.$refs.headImg.innerHTML=`<img src="${this.$Cookies.get('headImgUrl')}" alt="头像"/>`
				}
			},

			//点击头像
			clickHead(){
				this.$router.push('/personalInfo');
			},
            //调用二维码
            tdCode(){ 
                this.$axios.post(this.$api.getWxSignature, {
                    url: encodeURIComponent(window.location.href.split("#")[0]),
                }).then(success => {
                    if(success.data.code == '200'){
                        this.wxData = success.data.data;
                        this.tdmain();
                    }
                }).catch(error => {

                })
               
            },
            //二维码方法配置
            tdmain() {
                wx.config({
                   debug: false,
                   appId: this.wxData.appId, // 必填,公众号的唯一标识
                   timestamp: this.wxData.timestamp, // 必填,生成签名的时间戳
                   nonceStr: this.wxData.noncestr, // 必填,生成签名的随机串
                   signature: this.wxData.signature, // 必填,签名
                   jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
                })
                let that = this;
                wx.ready(function () {
                  wx.checkJsApi({
                    jsApiList: [
                      'scanQRCode'
                    ],
                    success: function (res) {
                      if (res.checkResult.scanQRCode === true) {
                         wx.scanQRCode({ 
                           desc: 'scanQRCode desc',
                           needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                           scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                           success: function (res) {
                            let getCode = decodeURI(res.resultStr) // 当needResult 为 1 时，扫码返回的结果
                            /*Dialog({
                                title: '01',
                                message: getCode,
                            });*/
                            that.$Cookies.set('personCodeData', getCode);
                            that.$router.push({path: '/scan',query: getCode});
                         }
                      })
                    } else {
                       alert('抱歉，当前客户端版本不支持扫一扫')
                      }
                    },
                    fail: function (res) { // 检测getNetworkType该功能失败时处理
                      alert('fail' + res)
                    }
                  })
                })                
                wx.error(function (res) {
                   alert('配置验证失败: ' + res.errMsg)
                })
            },
            //点击扫一扫
			clickScan(){
                this.tdCode();
                //console.log(this.$store.getters['test/personData'],'vvv')
				
            },
        },
    }
</script>

<style lang="scss" scoped>
    /*个人信息*/
    .personal-info{
        padding: 30px;

        .info{
            display: inline-block;
            vertical-align: top;
            margin-left: 10px;
            margin-top: 2px;

            .name{
                font-size: 20px;
                font-weight: bold;
                color: white;
            }
            .safety-icon{
                display: inline-block;
                width: 20px;
                height: 20px;
                background: url("../assets/images/safety-icon.png") no-repeat;
                background-size: cover;
                vertical-align: text-bottom;
            }

            .village-duty{
                font-size: 15px;
                color: white;
                margin-top: 6px;
            }
        }
    }

    /*扫一扫*/
    .scan{
        padding: 20px 0;
        text-align: center;

        .scan-img{
            width: 90%;
        }
    }

    /*温馨提示*/
    .tips{
        padding: 10px 5%;
        font-size: 15px;
        color: #222222;

        p{
            margin: 10px 0;
        }
        .title{
            font-weight: bold;
        }
    }

    /*公众号推广*/
    .popularize{
        padding: 20px 5%;

        .QR-code{
            width: 90px;
        }
        .text{
            display: inline-block;
            vertical-align: top;
            font-size: 15px;
            color: #222222;

            p{
                margin: 6px 0 0 20px;
            }
            .title{
                font-size: 20px;
                font-weight: bold;
                margin-top: 0;
            }
        }
    }

</style>

